<script setup>
import { getMonthCards, delMonthCard } from '@/api/month.js'
import { ref, onMounted, reactive } from 'vue'
import { message } from 'ant-design-vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const carNumber = ref('')
const personName = ref('')
const cardStatus = ref(null)
const cardlist = ref([])
const idlist = ref({})
const total = ref(null)
// const flag = ref(false)
// 列数据
const columns = [
  {
    title: '序号',
    dataIndex: 'index'
  },
  {
    title: '车主名称',
    dataIndex: 'personName',
    key: 'personName'
  },
  {
    title: '联系方式',
    dataIndex: 'phoneNumber',
    key: 'phoneNumber'
  },
  {
    title: '车牌号码',
    dataIndex: 'carNumber',
    key: 'carNumber'
  },
  {
    title: '车辆品牌',
    dataIndex: 'carBrand',
    key: 'carBrand'
  },
  {
    title: '剩余有效天数',
    dataIndex: 'totalEffectiveDate',
    key: 'totalEffectiveDate'
  },
  {
    title: '状态',
    dataIndex: 'cardStatus',
    key: 'cardStatus'
  },
  {
    title: '操作',
    dataIndex: 'operate',
    key: 'operate'
  }
]
// 下拉数据
const options = [{ label: '全部' }, { value: 0, label: '可用' }, { value: 1, label: '已过期' }]
// page和pageSize
const cardparams = reactive({
  page: 1,
  pageSize: 10
})
// 月卡列表
const getMonth = async () => {
  const res = await getMonthCards(cardparams)
  cardlist.value = res.data.rows.map((el, index) => ({
    ...el,
    index: (cardparams.page - 1) * cardparams.pageSize + index + 1
  }))
  total.value = res.data.total
  cardlist.value.forEach((item) => {
    if (item.cardStatus === 1) {
      item.cardStatus = '已过期'
    } else if (item.cardStatus === 0) {
      item.cardStatus = '可用'
    }
  })
  console.log(cardlist.value)
}
onMounted(() => {
  getMonth()
})
// 搜索事件
const search = () => {
  cardparams.carNumber = carNumber.value
  cardparams.personName = personName.value
  cardparams.cardStatus = cardStatus.value
  getMonth()
}
// 删除事件
const del = async (id) => {
  await delMonthCard(id)
  message.success('删除成功')
  getMonth()
}
// 批量删除事件
const deleteCard = async () => {
  const idArrey = Object.values(idlist.value)
  if (idArrey.length > 0) {
    console.log(idArrey)
    await delMonthCard(idArrey)
    message.success('批量删除成功')
    idlist.value = {}
    getMonth()
  } else {
    message.error('请选中你要删除的选项')
  }
}
// 多选框事件
const rowSelection = {
  type: 'checkbox',
  onChange: (selectedRowKeys) => {
    idlist.value = selectedRowKeys
  }
}
// 分页事件
const showTotal = () => {
  return `总共${total.value}条`
}
const changeCurrent = (page, pageSize) => {
  cardparams.page = page
  cardparams.pageSize = pageSize
  getMonthCards(cardparams)
}
</script>
<template>
  <!-- 搜索栏 -->
  <a-card>
    <a-form layout="inline">
      <a-form-item label="车牌号码：">
        <a-input v-model:value="carNumber" placeholder="请输入车牌号码"></a-input>
      </a-form-item>
      <a-form-item label="车主姓名：">
        <a-input v-model:value="personName" placeholder="请输入车主姓名"></a-input>
      </a-form-item>
      <a-form-item label="状态：">
        <a-select
          v-model:value="cardStatus"
          style="width: 190px"
          placeholder="请选择"
          :options="options"
        ></a-select>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="search">查询</a-button>
      </a-form-item>
    </a-form>
  </a-card>
  <!-- 添加和删除 -->
  <a-card>
    <div class="centers">
      <div>
        <a-space>
          <a-button type="primary" @click="router.push('/addcard')">添加月卡</a-button>
          <a-button type="primary" @click="deleteCard">批量删除</a-button>
        </a-space>
      </div>
      <p class="word">本园区共计 1650 个车位，月卡用户 6 人，车位占有率 0.36%</p>
    </div>
  </a-card>
  <!-- 表格 -->
  <a-table
    :row-selection="rowSelection"
    :columns="columns"
    rowKey="id"
    :data-source="cardlist"
    :pagination="{
      total: total,
      current: cardparams.page,
      pageSize: cardparams.pageSize,
      'show-total': showTotal,
      'show-size-changer': true,
      onChange: changeCurrent,
      pageSizeOptions: ['5', '10', '15', '20', '30']
    }"
  >
    <template #bodyCell="{ column, record }">
      <template v-if="column.dataIndex === 'operate'">
        <a-button
          type="link"
          @click="
            router.push({
              path: `/addcard/`,
              // params: { flags: flag },
              query: { id: record.id, flags: true }
            })
          "
          >续费</a-button
        >
        <a-button type="link" @click="router.push(`/findcard/${record.id}`)">查看</a-button>
        <!-- <a-button type="link" @click="router.push(`/addcard/${record.id}`)">编辑</a-button> -->
        <a-button
          type="link"
          @click="router.push({ path: `/addcard/`, query: { id: record.id, flags: false } })"
          >编辑</a-button
        >
        <a-popconfirm
          cancelText="取消"
          okText="删除"
          title="确定要删除吗"
          @confirm="del(record.id)"
        >
          <a-button type="text" danger>删除</a-button>
        </a-popconfirm>
      </template>
    </template>
  </a-table>
</template>
<style>
.centers {
  display: flex;
  justify-content: space-between;
}

.word {
  height: 40px;
  line-height: 30px;
  padding: 5px 10px 5px 10px;
  border: 1px solid #91d5ff;
  background-color: #e6f7ff;
}
</style>
